'use client'
import { useState, useEffect } from 'react'
import { storage } from '@/services/storage'
import { Toast } from 'flowbite-react'
import { FaBell } from 'react-icons/fa'
import Link from 'next/link'

export default function StudyReminder() {
  const [showReminder, setShowReminder] = useState(false)
  const [dueCardCount, setDueCardCount] = useState(0)

  useEffect(() => {
    const checkDueCards = () => {
      const decks = storage.getDecks()
      let totalDueCards = 0
      
      decks.forEach(deck => {
        const cards = storage.getCardsByDeck(deck.id)
        const dueCards = cards.filter(card => new Date(card.nextReview) <= new Date())
        totalDueCards += dueCards.length
      })

      setDueCardCount(totalDueCards)
      setShowReminder(totalDueCards > 0)
    }

    checkDueCards()
    const interval = setInterval(checkDueCards, 30 * 60 * 1000)
    return () => clearInterval(interval)
  }, [])

  if (!showReminder) return null

  return (
    <div className="fixed bottom-4 right-4 z-50">
      <Toast>
        <div className="flex items-center gap-3">
          <FaBell className="text-blue-500" />
          <div className="pl-1">
            <p className="text-sm font-normal">
              您有 {dueCardCount} 张卡片需要复习
            </p>
          </div>
          <Link 
            href="/study"
            className="ml-3 bg-blue-500 text-white px-3 py-1 rounded-lg text-sm hover:bg-blue-600"
          >
            开始学习
          </Link>
        </div>
      </Toast>
    </div>
  )
}